<template>
    <div class="title">角色管理</div>
    <el-table :data="formData.tableData" style="width: 100%" border stripe>
        <el-table-column type="index" width="100" label="序号" fixed />
        <el-table-column label="名称">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="描述">
            <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                    <template #reference>
                        <el-tag>{{ scope.row.desc }}</el-tag>
                    </template>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" :icon="Plus" circle @click="handleAdd()"></el-button>
                <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button type="danger" :icon="Delete" circle
                    @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[50, 100, 150, 200]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
    <el-pagination background layout="prev, pager, next" :total="1000" class="pageina" />
    <!-- 对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogtitle" width="500">
        <el-form :model="formData.dialogData">
            <el-form-item label="角色ID" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.id" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.desc" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addRole" v-show="showaddedit">
                    增加
                </el-button>
                <el-button type="primary" @click="editRole" v-show="!showaddedit">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
    Plus,
    Delete,
    Edit
} from '@element-plus/icons-vue'
// import RoleManame from '@/utils/role/role';
import roleAPI from '@/utils/role/role'

// 数据
// 全局数据
const formData = reactive({
    'tableData': [
        {
            name: '权限管理',
            desc: '管理所有权限',
            id: 1
        }
    ],
    'dialogData': {
        id: '',
        name: '',
        desc: ''
    }
})
// dialog数据
const dialogtitle = ref('')
const showaddedit = ref(true)
const dialogTem =
{
    name: '',
    desc: '',
    id: ''
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// 分页数据
const currentPage4 = ref(4)
const pageSize4 = ref(200)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)


// 函数处理
// 请求数据
const roles = async () => {
    const res = await roleAPI.get_all_role('/per-manage/roles/')
    formData.tableData = res
}
roles()

// 表格操作方法
const handleEdit = (index: number, row: any) => {
    formData.dialogData = row
    dialogtitle.value = '修改角色'
    dialogFormVisible.value = true
    showaddedit.value = false
}
const handleDelete = async (index: number, row: any) => {
    dialogtitle.value = '删除角色'
    await roleAPI.delete_role(row.id, '/per-manage/roles')
    roles()
    ElMessage({
        message: '你删除的' + row.name + '成功！',
        type: 'success',
    })
}

const handleAdd = async () => {
    dialogtitle.value = '添加角色'
    dialogFormVisible.value = true
    showaddedit.value = true
}

const addRole = async () => {
    await roleAPI.add_role('/per-manage/roles/', formData.dialogData)
    roles()
    ElMessage({
        message: '你添加的' + formData.dialogData.name + '成功！',
        type: 'success',
    })
    formData.dialogData = dialogTem
    dialogFormVisible.value = false
}

const editRole = async () => {
    await roleAPI.edit_role('/per-manage/roles/', formData.dialogData)
    roles()
    ElMessage({
        message: '你修改的' + formData.dialogData.name + '成功！',
        type: 'success',
    })
    formData.dialogData = dialogTem
    dialogFormVisible.value = false
}
// dialog函数方法
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>

<style scoped>
.title {
    color: #007acc;
    text-align: center;
    font-size: 40px;
    background: gray;
    margin-bottom: 15px;
}

.pageina {
    margin-top: 15px;
    justify-content: center;
}
</style>